<template>
	<view>
		<view v-if="order.payAmount">
			<view>订单支付页面</view>
			<view>支付总数：<text class="active">{{order.payAmount/100}}</text></view>
			选择支付方式：
			<view v-for="item in order.paymentWayVOList" :key="item.payConfigId">
				<view>
				 	{{item.payName}} 
				</view>
			</view>
			
		</view>
		<view>
			<input type="text" v-model.number="amount">
			
			<button type="primary" @click="payAli" size="mini">支付宝支付</button>
			<button type="primary" @click="payWe" size="mini">微信小程序支付</button>
			<button type="primary" @click="payWeiXin">app-微信支付</button>
		</view>
	</view>
	
	
	
</template>

<script setup>
	// ref引用，
	import {ref} from 'vue'
	// 获取onLoad生命周期
	import {onLoad} from '@dcloudio/uni-app'
	// 获取订单信息
	import { GetOrder,PayAli} from '../../api/index.js'
	const amount = ref(1);
	// 订单
	const order = ref ({})
	// 当加载完毕获，获取上个页面传入的id
	/*
	onLoad(({orderId})=>{
		GetOrder({
			"orderId":orderId,
			"tradeChanel":1,
			"subTradeChanel":6
			})
		.then(res=>{
			if(res.code === 200){
				// 如果请求成功更新order
				order.value = res.data;
			}else{
				// 否则显示失败
				uni.showToast({
					title:res.message||"获取订单信息失败",
					icon:'error'
				})
			}
		})
		.catch(err=>{
			uni.showToast({
				title:"网络订单请求失败",
				icon:'error'
			})
		})
	})*/
	function payAli(){
		// 发送支付请求
		PayAli({
			"platform":"app-plus",
			"provider":"alipay",
			"totalFee":amount.value,
			})
		.then(res=>{
			// 获取支付信息
			console.log("请求数据",res);
			uni.requestPayment({
				provider:'alipay',
				orderInfo:res.orderInfo,
				success(res){
					// 支付成功
					console.log(res);
					uni.showToast({
						title:"支付成功"
					})
				},
				fail(err){
					// 支付失败
					console.log(err);
					uni.showToast({
						title:"支付失败",
						icon:'error'
					})
				}
			})
		})
	}
	 
	 function payWe(){
		 // 01 登录获取到code
		 wx.login({
			 // 获取code
			 success(res){
				 // console.log(res,res.code);
				 uni.request({
					 url:"https://ai.qikuedu.com/study_miniprog_openid",
					 data:{code:res.code},
					 // 获取openid
					 success(res){
						 // console.log("openid",res)
						 uni.request({
						 	url:"https://ai.qikuedu.com/study_miniprog_pay",
							data:{openid:res.data.openid,amount:amount.value},
							// 获取支付参数
							success(res){
								// console.log("支付参数",res);
								// 发起支付
								wx.requestPayment({
									...res.data,
									signType: 'MD5',
									success(res){
										console.log("支付成功",res);
										wx.showToast({title:"支付成功"})
									},
									fail(err){
										console.log("支付失败",err);
										wx.showToast({icon:"error",title:"支付失败"})
									}
								})
							}
						 })
					 }
				 })
				
			 }
		 })
		 // 02 获取openid
		 // 03 创建订单获取支付信息
		 // 04 发起支付
	 }
	function payWeiXin(){
		// 01 获取code
		uni.login({			provider: 'weixin',			onlyAuthorize:true,
			success(res){
				console.log("code",res)
				// 02 获取openid
				uni.request({
					url:"https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/user-center",
					method:"POST",
					data: {
						action: 'loginByWeixin',
						params: {
							code: res.code,
							platform: 'mp-weixin'
						}
					},
					fail(err) {
						console.log("获取openid失败",err)
					},
					success(res){	
						// 03 获取订单信息和支付参数
						console.log("获取订单信息和支付参数",res)
						uni.request({
							url:"https://97fca9f2-41f6-449f-a35e-3f135d4c3875.bspapp.com/http/pay",
							method:"POST",
							data:{
							  "platform": "app-plus",
							  "provider": "wxpay",
							  "openid": res.data.openid,
							  "totalFee": amount.value},
							  fail(err){
								  console.log("获取支付信息失败",err)
							  },
							  complete(res){
								  console.log("请求完成",res)
							  },
							  // 获取支付参数
							  success(res){
								  
								  console.log("res，订单信息",res)
								  uni.requestPayment({
									provider:"wxpay",
								  	orderInfo:res.data.orderInfo,
									success(res){
										console.log("支付成功",res)
										uni.showToast({
											title:"支付成功"
										})
									},
									fail(err){
										console.log(err,"支付失败"),
										uni.showToast({
											title:"支付失败",
											icon:"error"
										})
									}
								  })
							  }
							 
						})
					}
				})
			}		})
	}
</script>

<style>
.active{
	color:#f36;
}
</style>
